<template>
   <div>
      <RouterView v-slot="{Component,route}">
         <transition name="slide-fade" mode="out-in">
            <keep-alive :max="5">
               <component :is="Component" v-if="route.meta.keepAlive" :key="route.path"></component>
            </keep-alive>
         </transition>
         <transition name="slide-fade" mode="out-in">
            <component :is="Component" v-if="!route.meta.keepAlive" :key="route.path"></component>
         </transition>
      </RouterView>
   </div>
</template>
<style>
.slide-fade-enter-active{
   transition: all 0.3s ease-out;
}
.slide-fade-leave-active{
   transition: all 0.3s cubic-bezier(1,0.5,0.8,1);
}
.slide-fade-enter-from,
.slide-fade-leave-to{
   transform: translateX(-50PX);
   opacity: 0;
}
</style>